<template>
  <div class="supplier-table">
    <el-card>
      <div slot="header" class="clearfix">
        <!-- 这里还是需要开标之后才显示 -->
        <span class="role-span">投标单位</span>
        <div class="box-card-btn" v-if="!profile.clar && showBtn">
          <el-button type="primary" @click="showSupplierListDialog = true">
            选择供应商
          </el-button>
          <el-button
            type="danger"
            @click="deleteSupplier"
            :disabled="supplierSelectionData.length === 0"
          >
            移除供应商
          </el-button>
        </div>
      </div>
      <el-table :data="supplierList" stripe @selection-change="supplierSelectHandler">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column type="selection" v-if="!profile.clar && showBtn"></el-table-column>
        <el-table-column prop="name" label="供应商名称"></el-table-column>
        <el-table-column prop="code" label="供应商代码" width="130"></el-table-column>
        <el-table-column prop="contactPerson" label="联系人姓名"></el-table-column>
        <el-table-column prop="contactPhone" label="联系人电话"></el-table-column>
        <el-table-column prop="detail.email" label="联系邮箱"></el-table-column>
        <el-table-column label="供应商状态">
          <template slot-scope="scope">
            <span :class="{ error: scope.row.bidStatus === 'REJECT' }">
              {{ dict.label.project_supplier_status[scope.row.bidStatus] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否报价" width="80">
          <template slot-scope="scope">
            <i class="el-icon-check color-green" v-if="scope.row.supplierPlans.length > 0"></i>
            <i class="el-icon-minus" v-else></i>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button @click="auditSupplierBtn(scope.row)">
              查看供应商信息
            </el-button>
            <el-button @click="applyPass(scope.row)" v-if="scope.row.bidStatus === 'APPLY'">
              通过报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :visible.sync="showSupplierListDialog" append-to-body width="90%" top="20px">
      <supplier-list
        mode="selection"
        v-if="showSupplierListDialog"
        @add-supplier="addSupplier"
      ></supplier-list>
    </el-dialog>

    <DialogAuditSupplier
      :dialog.sync="checkSupplierDialog"
      :profile="checkSupplierProfile"
      :check-only="true"
    ></DialogAuditSupplier>
  </div>
</template>

<script>
  import { resultFormatter } from '@/utils';
  import * as ProjectRequest from '@/api/project';
  import DialogAuditSupplier from '@/views/supplier/dialogAuditSupplier';
  import SupplierList from '@/views/supplier/list';

  export default {
    props: {
      profile: {
        type: Object,
        default: () => {},
      },
      mode: {
        type: String,
        default: '',
      },
    },
    dicts: ['project_supplier_status'],
    data() {
      return {
        pid: this.profile.id,
        supplierList: [],
        supplierSelectionData: [],
        checkSupplierProfile: {},

        checkSupplierDialog: false,
        showSupplierListDialog: false,
      };
    },
    components: {
      SupplierList,
      DialogAuditSupplier,
    },
    computed: {
      adminMode() {
        return this.mode === 'admin';
      },
      showBtn() {
        return this.profile.status !== 'AWARD';
      },
    },
    mounted() {
      this.getSupplier();
    },
    methods: {
      /**
       * 获取项目的供应商
       */
      getSupplier() {
        ProjectRequest.getSupplier({
          projectId: this.pid,
        }).then((res) => {
          this.supplierList = resultFormatter(res.content);
        });
      },
      /**
       * 供应商相关操作
       */
      addSupplier(suppliers) {
        this.showSupplierListDialog = false;
        Promise.all(
          suppliers.map((supplier) => {
            return ProjectRequest.addSupplier({
              projectId: this.pid,
              supplierId: supplier.id,
            });
          }),
        ).then(() => {
          this.$message.success('邀请供应商成功!');
          this.getSupplier();
        });
      },
      deleteSupplier() {
        Promise.any(
          this.supplierSelectionData.map((suppliers) => {
            return ProjectRequest.delSupplier({
              projectId: this.pid,
              supplierId: suppliers.id,
            });
          }),
        ).then(() => {
          this.$message.success('移除供应商成功!');
          this.getSupplier();
        });
      },
      supplierSelectHandler(data) {
        this.supplierSelectionData = [...data];
      },
      /**
       * 审核供应商窗口
       */
      auditSupplierBtn(row) {
        this.checkSupplierProfile = row;
        this.checkSupplierDialog = true;
      },
      /**
       * 报名通过
       */
      applyPass(row) {
        ProjectRequest.applyPass({
          projectId: this.pid,
          supplierId: row.id,
        }).then((res) => {
          this.getSupplier();
          this.$message.success(`${row.name}报名审核通过`);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .error {
    color: #ee2200;
    font-weight: bolrder;
  }
</style>
